fix: delete card confirmation + column Enter key submit (#513 #516)#527
fix: delete card confirmation + column Enter key submit (#513 #516)#527Chris0Jeky merged 4 commits intomainfrom
Conversation
Replace browser-native confirm() with TdDialog in CardModal. The dialog shows the card name, prevents double-submit via isDeleting guard, and is cancellable via Cancel button or backdrop click. Updates tests to drive the new dialog flow instead of spying on window.confirm.
Add @keydown.enter.prevent on the column name input so pressing Enter submits the column creation form instead of bubbling to the board canvas underneath.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
Ensures isDeleting is always cleared after the delete attempt, whether it succeeds or fails, guarding against stuck disabled states.
Self-Review (Adversarial Pass)#513 checks:
#516 checks:
Additional observations:
|
There was a problem hiding this comment.
Code Review
This pull request replaces the native browser confirmation dialog for card deletion with a custom TdDialog component in CardModal.vue, adding state management to handle the deletion process and updating the corresponding tests. It also adds an enter key handler to the column creation input in BoardView.vue. Feedback suggests scoping DOM queries in tests to the dialog for better reliability and identifies a redundant event handler in the column creation form.
| const confirmButton = Array.from(document.querySelectorAll<HTMLButtonElement>('button')).find( | ||
| (btn) => btn.textContent?.trim() === 'Delete', | ||
| ) |
There was a problem hiding this comment.
The current implementation to find the confirmation button queries the entire document, which could lead to flaky tests if another button with the text 'Delete' is present. It's better to scope the query to the dialog element to make the test more robust. It would also be good practice to assert that dialogElement is not null before using it.
| const confirmButton = Array.from(document.querySelectorAll<HTMLButtonElement>('button')).find( | |
| (btn) => btn.textContent?.trim() === 'Delete', | |
| ) | |
| const dialogElement = document.querySelector('.td-dialog'); | |
| const confirmButton = Array.from(dialogElement!.querySelectorAll<HTMLButtonElement>('button')).find( | |
| (btn) => btn.textContent?.trim() === 'Delete', | |
| ); |
| placeholder="Column name" | ||
| class="td-column-form__input" | ||
| autofocus | ||
| @keydown.enter.prevent="createColumn" |
There was a problem hiding this comment.
The @keydown.enter.prevent handler on this input is redundant. The parent <form> element already has a @submit.prevent="createColumn" handler. Standard browser behavior will trigger the form's submit event when Enter is pressed in a text input, so the existing form handler is sufficient. Removing this duplicate handler simplifies the code and relies on idiomatic form handling.
Use a computed property for the dialog description so the card title is wrapped in real quote characters instead of the HTML entity " that was leaking through into the text-interpolated paragraph.
Adversarial Review (Independent Pass)Verdict: REQUEST CHANGES (one bug fixed inline — see below)FindingsMINOR (fixed in this review pass): The In a JavaScript template literal,
Fix applied: Introduced a #513 checks
#516 checks
Test quality
Build
Summary: One real bug (visible |
Second Adversarial Review (Post-Fix Pass)Verdict: APPROVEPrevious fix verified
#513 checksCard title displayed correctly in dialog: pass — Double-delete protected: pass — Escape/backdrop safe during in-flight delete: pass — Backdrop click is blocked by Error path leaves card intact: pass — Delete button visually distinct from Cancel: pass — Cancel is #516 checksEnter binding on correct element: pass — Empty name guarded: pass — Propagation stopped correctly: pass — Build
Additional findingsMinor / informational — out of scope:
None of the above are blockers for merging this PR. |
Summary
Two small UX fixes discovered in the 2026-03-29 manual testing session.
Fix 1: Delete Card confirmation dialog (#513)
TdDialogconfirmation before proceedingFix 2: Column name Enter key (#516)
@keydown.enter.preventto stop the event from propagating to the board beneathTest changes
window.confirmto instead drive the newTdDialogflowCloses
Closes #513, Closes #516
Risk
Low — UI-only changes; no store or API changes.